<script setup lang='ts'>
import { Message } from "earthsdk-ui"
import { XbsjEarthUi } from '../../scripts/xbsjEarthUi';
import Button from '../../components/Button.vue';
import { inject, onBeforeUnmount, onMounted, ref } from 'vue';
import { createVueDisposer, toVR } from 'vue-xe2-plugin/dist-node/components/xe2/tools';
import Line from "./interaction/Line.vue";
import Map from "./interaction/Map.vue";
import Walk from "./interaction/Walk.vue";
import RotateGlobe from "./interaction/RotateGlobe.vue";
import RightList from '../../components/RightList.vue';

const xbsjEarthUi = inject('xbsjEarthUi') as XbsjEarthUi
const d = createVueDisposer(onBeforeUnmount);
const roamMode = toVR<string>(d, [xbsjEarthUi, 'roamMode'])
const mode = ref('Map')
const flag = ref(false)
const destroyClick = () => {
    if (dispose) {
        dispose()
        dispose = null
    }
}
let dispose: any = null
onMounted(() => {
    const update = () => {
        const viewer = xbsjEarthUi.activeViewer
        dispose = viewer?.clickEvent.don(async e => {
            if (!e.screenPosition) return
            if (flag.value) {//拾取点并且修改为第一人称漫游
                const position = await viewer.pickPosition(e.screenPosition)
                const pos = position as [number, number, number]
                pos[2] += 2
                viewer.changeToWalk(pos)
                mode.value = 'Walk'
                roamMode.value = 'Walk'
                flag.value = false
            }
        })
    }
    update()
    const dispos = xbsjEarthUi.activeViewerChanged.donce(update)
    const roamDispose = xbsjEarthUi.roamModeChanged.don((val) => {
        if (val === 'Map') {
            mode.value = 'Map'
        }
    })
    onBeforeUnmount(() => {
        roamDispose()
        dispos()
        destroyClick()
    })
})
//修改模式为第一人称
const changeWalkMode = () => {
    const viewer = xbsjEarthUi.activeViewer
    if (!viewer) return
    viewer.changeToMap()
    Message.warning('请点击选择一个位置点')
    flag.value = true
    mode.value = 'Walk'
}
//修改模式为默认
const changeMapMode = () => {
    flag.value = false
    mode.value = 'Map'
    const viewer = xbsjEarthUi.activeViewer
    if (!viewer) return
    viewer.changeToMap()
    roamMode.value = 'Map'
}
//修改模式为沿线运动
const changeLineMode = () => {
    const viewer = xbsjEarthUi.activeViewer
    if (!viewer) return
    viewer.changeToMap()
    flag.value = false
    mode.value = 'Line'
}
//修改模式为环绕地球
const changeRotateGlobeMode = () => {
    flag.value = false
    mode.value = 'RotateGlobe'
    
}
</script>

<template>
    <RightList :title="'交互模式'">
        <Button :name="'moren'" :content="'默认'" :click="changeMapMode" :size="18" :actived="mode === 'Map'"
            :left-button="true"></Button>
        <!-- <Button :name="'diyirencheng'" :content="'第一人称'" :click="changeWalkMode" :actived="mode === 'Walk'"></Button>
        <Button :name="'yanxianyundong'" :content="'沿线运动'" :click="changeLineMode" :actived="mode === 'Line'"
            :left-button="true"></Button> -->
        <Button :name="'diqiuxuanzhun'" :content="'环绕地球'" :click="changeRotateGlobeMode"
            :actived="mode === 'RotateGlobe'"></Button>
        <Line :xbsjEarthUi="xbsjEarthUi" v-if="mode === 'Line'"> </Line>
        <Walk :xbsjEarthUi="xbsjEarthUi" v-if="mode === 'Walk'"> </Walk>
        <Map :xbsjEarthUi="xbsjEarthUi" v-if="mode === 'Map'"> </Map>
        <RotateGlobe :xbsjEarthUi="xbsjEarthUi" v-if="mode === 'RotateGlobe'">
        </RotateGlobe>
    </RightList>
</template>
